<template>
  <div class="container">
    <div class="info-section">
      <h4>个人信息</h4>
      <div class="user-info">
        <img :src="empInfos?.avatarUrl" alt="头像" class="avatar" />
        <div class="user-details">
          <p>{{ empInfos?.empName }}</p>
          <p>
            {{ genderEnumText(empInfos?.gender) }} {{ empInfos?.title }}
            {{ empInfos?.deptName }}
          </p>
          <p class="description">{{ empInfos?.notes }}</p>
        </div>
      </div>
    </div>
    <div class="schedule-section">
      <h4>我的班次</h4>
      <ul class="schedule-list" v-if="shifts.length > 0">
        <li v-for="(shift, index) in shifts" :key="index">
          <span class="date"
            >{{ dayjs(shift.workDate).format('MM-DD')
            }}{{ timeFun(shift.workDate) }}</span
          >
          <div>
            <span class="time" v-for="(item, index) in shift.detailList" :style="index < shift.detailList.length - 1?'margin-right:10px;':''"
              >{{ item.startTime }}~{{ item.endTime }}
              {{ index < shift.detailList.length - 1 ? ',' : '' }}</span
            >
          </div>
        </li>
      </ul>
      <div class="schedule-btn" v-if="shifts.length == 0">
        <el-empty description="暂无数据" :image-size="100" :image="emptyImage" />
      </div>
    </div>
    <drag-list></drag-list>
  </div>
</template>

<script lang="ts" setup>
import emptyImage from '@/assets/icon/internet_empty_illustration.svg';
import dayjs from 'dayjs';
import type { MyScheduleData, EmpInfoData } from '@/types/dashboard/index';
import { getMySchedule, getEmpInfo } from '@/api/dashboard/index';
import stores from '@/store/index';
const genderEnum = ref<any>(
  stores.useBaseDataStore().getEnumSelect('genderEnum')
);
const genderEnumText = (val: any) => {
  for (let index = 0; index < genderEnum.value.length; index++) {
    let item = genderEnum.value[index];
    if (val == item.value) {
      return item.text;
    }
  }
};

const timeFun = (val: any) => {
  const d = dayjs(val);
  if (!d.isValid()) return '';
  return d.isSame(dayjs(), 'day') ? ' 今天' : '';
};

const shifts = ref<MyScheduleData[]>([]);
const getMyScheduleApi = async () => {
  let res = await getMySchedule();
  if(res.code != '200'){
    //ElMessage.error(res.msg);
    return;
  }
  shifts.value = res.data;
};
getMyScheduleApi();

const empInfos = ref<EmpInfoData>();
const EmpInfoApi = async () => {
  let res = await getEmpInfo();
  if(res.code != '200'){
    //ElMessage.error(res.msg);
    return;
  }
  empInfos.value = res.data;
};
EmpInfoApi();
</script>

<style lang="scss" scoped>

.container {
  padding: 20px;
  border-radius: 10px;
}

.info-section {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;

  h2 {
    margin-bottom: 10px;
  }

  .user-info {
    display: flex;
    margin-top: 20px;
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 16px;
    }

    .user-details {
      p {
        margin: 0;
        line-height: 1.5;
        font-size: 14px;
      }
      p:nth-of-type(1) {
        color: rgba(29, 33, 41, 1);
      }
      p:nth-of-type(2) {
        color: #4e5969;
      }
      p:nth-of-type(3) {
        color: rgba(134, 144, 156, 1);
      }
      .description {
        color: #666;
        font-size: 12px;
      }
    }
  }
}

.schedule-section {
  background-color: white;
  padding: 20px;
  border-radius: 10px;

  h2 {
    margin-bottom: 10px;
  }

  .schedule-list {
    list-style: none;
    padding: 0;
   width: 100%;
    margin-top: 20px;
    height: calc(100vh - 340px);
    overflow-y: auto;
    
    li {
      display: flex;
      margin-bottom: 20px;
      justify-content: left;
      .date {
        color: #666;
        margin-right: 21px;
            width: 94px;
      }

      .time {
        color: #666;
      }
    }
  }
}
</style>
